<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>轨迹汇聚</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="language,proj4,mapv" src="./static/libs/include-mapboxgl-local.js"></script>
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map">
    <div id="mouse-position">
    </div>
  </div>
  <script>
    //一定要去mapbox注册一个key,这个key会失效的
    mapboxgl.accessToken =
      'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
    var map = new mapboxgl.Map({
      container: 'map', // 绑定div
      style: 'mapbox://styles/mapbox/dark-v9', // 使用MapBox官方的样式
      center: [114.321317, 30.398428],
      zoom: 3
    });
    //注册鼠标移动事件
    map.on('mousemove', function (e) {
      //经纬度坐标转web墨卡托
      const earthRad = 6378137.0;
      const x = e.lngLat.lng * Math.PI / 180 * earthRad;
      const a = e.lngLat.lat * Math.PI / 180;
      const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
      document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
    });
    map.addControl(new MapboxLanguage(), 'top-right'); //中文支持
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

    var data = [];
    var timeData = [];

    function curive(fromPoint, endPoint, n) {
      var delLng = (endPoint.lng - fromPoint.lng) / n;
      var delLat = (endPoint.lat - fromPoint.lat) / n;

      for (var i = 0; i < n; i++) {
        var pointNLng = fromPoint.lng + delLng * i;
        var pointNLat = fromPoint.lat + delLat * i;
        timeData.push({
          geometry: {
            type: 'Point',
            coordinates: [pointNLng, pointNLat]
          },
          count: 1,
          time: i
        });
      }
    }

    // 构造数据
    $.ajax({
      url: '../../static/data/mapv/qianxi-time.csv',
      success: function (rs) {
        var items = rs.split('|');
        for (var i = 0; i < items.length; i++) {
          var itemArr = items[i].split(/\n/);
          for (var k = 0; k < itemArr.length; k++) {
            if (!!itemArr[k]) {
              var item = itemArr[k].split(/\t/);
              if (item[0] === '起点城市' || item[0] === '迁出城市') {
                var cityBegin = item[1];
              }
              if (item[0] !== '起点城市' || item[0] !== '迁出城市' && item.length > 1) {
                var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(item[0].replace(/市|省/, ""));
                var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(cityBegin.replace(/市|省/, "").trim());
                if (cityCenter1) {
                  if (Math.random() > 0.7) {
                    curive(cityCenter2, cityCenter1, 50);
                  }
                  data.push({
                    geometry: {
                      type: 'LineString',
                      coordinates: [
                        [cityCenter1.lng, cityCenter1.lat],
                        [cityCenter2.lng, cityCenter2.lat]
                      ]
                    },
                    count: 100 * Math.random()
                  });
                }
              }
            }
          }
        }

        var dataSet = new mapv.DataSet(data);
        var options = {
          strokeStyle: 'rgba(55, 50, 250, 0.3)',
          globalCompositeOperation: 'lighter',
          shadowColor: 'rgba(55, 50, 250, 0.5)',
          methods: {
            click: function (item) { }
          },
          gradient: {
            0: 'rgba(55, 50, 250, 0)',
            1: 'rgba(55, 50, 250, 1)'
          },
          lineWidth: .2,
          draw: 'intensity'
        };

        new mapboxgl.zondy.MapvLayer(map, dataSet, options);

        var dataSet = new mapv.DataSet(timeData);
        var options = {
          fillStyle: 'rgba(255, 250, 250, 0.9)',
          size: .5,
          animation: {
            type: 'time',
            stepsRange: {
              start: 0,
              end: 50
            },
            trails: 1,
            duration: 5,
          },
          draw: 'simple'
        };
        new mapboxgl.zondy.MapvLayer(map, dataSet, options);
      }
    });
  </script>


</body>

</html>